<template>
  <div class="password">
    <!-- 头部 -->
    <div class="head">
      <Header>
        <template #title>
          {{ title }}
        </template>
      </Header>
    </div>
    <!-- 主体 -->
    <div class="workspace">
      <div class="makesure">
        <input v-model="password" type="password" placeholder="输入密码" class="inputa" />
        <input
          v-model="confirmPassword"
          type="password"
          placeholder="确认密码"
          class="inputb"
        />
        <div v-if="showSuccessMessage" class="success-message">
          密码修改成功！
        </div>
        <div v-if="showErrorMessage" class="error-message">
          密码修改失败，请确认两次输入的密码存在且相同！
        </div>
      </div>
      <div class="go">
        <van-button type="primary" block to="pswd" @click="submit"
          >确认</van-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, watch } from "vue";


// import CaptchaInput from "../../componets/CaptchaInput.vue";
const password = ref("");
const confirmPassword = ref("");
const showSuccessMessage = ref(false);
const showErrorMessage = ref(false);



// 设置页面标题
const title = "手机号修改";

const router = useRouter();

const goBack = () => {
  router.go(-1);
};
const countdown = ref(0);
const isCounting = ref(false);

const startCountdown = () => {
  if (!isCounting.value) {
    isCounting.value = true;
    countdown.value = 60; // 设置倒计时初始值

    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value === 0) {
        clearInterval(timer);
        isCounting.value = false;
      }
    }, 1000);
  }
};

watch(countdown, (newValue) => {
  if (newValue === 0) {
    // 倒计时结束后，可以执行一些其他操作
  }
});
//修改密码提交反馈
function submit() {
  if (password.value && confirmPassword.value && password.value === confirmPassword.value) {
    // 执行密码修改逻辑，假设修改成功
    showSuccessMessage.value = true;
    showErrorMessage.value = false;
  } else {
    showSuccessMessage.value = false;
    showErrorMessage.value = true;
  }
}
</script>


<style lang="scss" scoped>
:deep(.go) {
  margin-top: 59vh;
  width: 94vw;
  margin-left: 3vw;
}
.capcha {
  margin-top: 1vh;
  margin-left: 8vw;
}
.send {
  button {
    padding: 1vw 1vh;
    border: none;
    background-color: #fff;
    font-size: 14px;
    color: rgba(99, 94, 232, 0.748);
    margin-top: 2vh;
  }
}
.van-cell {
  height: 8vh;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  font-weight: bold; /* 加粗 */
  color: rgb(103, 99, 99); /* 灰色 */
}

.success-message {
  color: green;
}

.error-message {
  color: red;
}

.makesure{
    width: 100vw;
    height: 15vh;
    margin-top: 2vh;
    .inputa, .inputb{
        width: 80vw;
        height: 5vh;
        margin-top: 2vh;
        margin-left: 10vw;
        padding-left: 5px;
        border-radius: 5px;
    }
    .error-message,.success-message{
        margin-left: 35vw;
        margin-top: 20vh;
        width: 30vw;
        height: 10vh;
        text-align: center;
        font-size: larger;
    }
}
</style>
